<template>
  <div class="wrapper">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="location-wrapper">
        <img src="../assets/elmlogo.jpg" class="elm-logo">
        <div class="location">
          <i class="fa fa-map-marker"></i>
          云南大学呈贡校区...
          <i class="fa fa-angle-down"></i>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-wrapper">
      <!-- 搜索框 -->
      <div class="search-container">
        <div class="search-input">
          <i class="fa fa-search"></i>
          <input type="text" placeholder="茶百道">
        </div>
        <button class="search-btn">搜索</button>
      </div>

      <!-- 搜索框下方的第一个banner -->
      <div class="banner-top">
        <img src="../assets/index_banner1.jpg" alt="banner1" class="banner-img">
      </div>

      <!-- 分类模块 -->
      <div class="category-section">
        <!-- 第一行分类 -->
        <div class="category-row">
          <div class="category-item" @click="toBusinessList(1)">
            <img src="../assets/dcfl01.jpg" alt="美食外卖">
            <span>美食外卖</span>
          </div>
          <div class="category-item" @click="toBusinessList(2)">
            <img src="../assets/dcfl02.jpg" alt="超市便利">
            <span>超市便利</span>
          </div>
          <div class="category-item" @click="toBusinessList(3)">
            <img src="../assets/dcfl03.jpg" alt="学生福利">
            <span>学生福利</span>
          </div>
          <div class="category-item" @click="toBusinessList(4)">
            <img src="../assets/dcfl04.jpg" alt="水果买菜">
            <span>水果买菜</span>
            <span class="tag">牛肉</span>
          </div>
          <div class="category-item" @click="toBusinessList(5)">
            <img src="../assets/dcfl05.jpg" alt="看病买药">
            <span>看病买药</span>
          </div>
        </div>

        <!-- 第二行分类 -->
        <div class="category-row">
          <div class="category-item">
            <img src="../assets/dcfl06.jpg" alt="甜品饮品">
            <span>甜品饮品</span>
          </div>
          <div class="category-item">
            <img src="../assets/dcfl07.jpg" alt="天天爆红包">
            <span>天天爆红包</span>
          </div>
          <div class="category-item">
            <img src="../assets/dcfl08.jpg" alt="拼团">
            <span>拼团</span>
          </div>
          <div class="category-item">
            <img src="../assets/dcfl09.jpg" alt="赚吃货豆">
            <span>赚吃货豆</span>
          </div>
          <div class="category-item">
            <img src="../assets/dcfl10.jpg" alt="0元领水果">
            <span>0元领水果</span>
          </div>
        </div>
      </div>

      <!-- 分类下方的第二个banner -->
      <div class="banner-bottom">
        <img src="../assets/index_banner2.jpg" alt="banner2" class="banner-img">
      </div>

      <!-- 灰色背景区域 -->
      <div class="grey-background">
        <!-- 底部导航栏 -->
        <div class="nav-wrapper">
          <div class="nav-bar">
            <div class="nav-item">
              <div class="nav-content">
                <span class="nav-text" style="color: #ff4e4e">年终特惠</span>
              </div>
            </div>
            <div class="nav-item">
              <div class="nav-content">
                <img src="../assets/xueshengtejia.jpg" class="nav-icon">
                <span class="nav-text">学生特价</span>
              </div>
            </div>
            <div class="nav-item">
              <div class="nav-content">
                <span class="nav-text">天天爆红包</span>
              </div>
            </div>
            <div class="nav-item">
              <div class="nav-content">
                <span class="nav-text">减配送费</span>
              </div>
            </div>
            <div class="nav-item">
              <div class="nav-content">
                <i class="fa fa-bars"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- 商家列表 -->
        <div class="business-list">
          <!-- 茶百道 -->
          <div class="business-item" @click="toBusinessList(1)">
            <div class="business-tag">品牌</div>
            <div class="business-img">
              <img src="../assets/sj01.webp">
            </div>
            <div class="business-info">
              <h3 class="business-name">茶百道(呈贡大学城店)</h3>
              <div class="business-rating">
                <span class="score">4.8分</span>
                <span class="sales">月售2000+</span>
                <span class="time">25分钟</span>
                <span class="distance">4.6km</span>
              </div>
              <div class="delivery-line">
                <span>起送¥18</span>
                <span class="delivery">配送</span>
                <span>约¥2</span>
                <span class="origin-price">¥5</span>
              </div>
              <div class="promotion-box">
                <div class="promotion-tag">
                  <i class="fire-icon">🔥</i>
                  <span>下午茶热搜</span>
                </div>
                <div class="promotion-tag">
                  <span>32人觉得赞很高</span>
                </div>
              </div>
              <div class="activity-box">
                <div class="activity-tag">
                  <i class="crown-icon">👑</i>
                  <span>最高28</span>
                </div>
                <div class="activity-tag">10元</div>
              </div>
            </div>
          </div>

          <!-- 益禾堂 -->
          <div class="business-item">
            <div class="business-tag">品牌</div>
            <div class="business-img">
              <img src="../assets/sj02.webp">
            </div>
            <div class="business-info">
              <h3 class="business-name">益禾堂(仕林街店)</h3>
              <div class="business-rating">
                <span class="score">4.8分</span>
                <span class="sales">月售1000+</span>
                <span class="time">25分钟</span>
                <span class="distance">3.4km</span>
              </div>
              <div class="delivery-line">
                <span>起送¥15</span>
                <span class="delivery">配送</span>
                <span>约¥0.2</span>
                <span class="origin-price">¥4.2</span>
                <span class="delivery-tag">蜂鸟准时达</span>
              </div>
              <div class="promotion-box">
                <div class="promotion-tag">
                  <i class="fire-icon">🔥</i>
                  <span>近30日126个回头客</span>
                </div>
                <div class="promotion-tag">
                  <span>回复超快</span>
                </div>
              </div>
              <div class="activity-box">
                <div class="activity-tag">
                  <i class="crown-icon">👑</i>
                  <span>最高28</span>
                </div>
                <div class="activity-tag">10元</div>
                <div class="activity-tag red">50减1</div>
              </div>
            </div>
          </div>

          <!-- 蜜雪冰城 -->
          <div class="business-item">
            <div class="business-tag">品牌</div>
            <div class="business-img">
              <img src="../assets/sj03.webp">
            </div>
            <div class="business-info">
              <h3 class="business-name">蜜雪冰城(大学城地铁口店)</h3>
              <div class="business-rating">
                <span class="score">4.6分</span>
                <span class="sales">月售200+</span>
                <span class="time">25分钟</span>
                <span class="distance">2.4km</span>
              </div>
              <div class="delivery-line">
                <span>起送¥15</span>
                <span class="delivery">免配送费</span>
                <span class="origin-price">¥3.2</span>
                <span class="delivery-tag">蜂鸟准时达</span>
              </div>
              <div class="promotion-box">
                <div class="promotion-tag">
                  <i class="fire-icon">🔥</i>
                  <span>11人觉得口感超厚</span>
                </div>
                <div class="promotion-tag">
                  <span>入会享优惠</span>
                </div>
              </div>
              <div class="activity-box">
                <div class="activity-tag">
                  <i class="crown-icon">👑</i>
                  <span>最高28</span>
                </div>
                <div class="activity-tag">支持自取</div>
                <div class="activity-tag">食无忧</div>
              </div>
            </div>
          </div>

          <!-- 711便利店 -->
          <div class="business-item">
            <div class="business-tag">品牌</div>
            <div class="business-img">
              <img src="../assets/sj04.png">
            </div>
            <div class="business-info">
              <h3 class="business-name">711便利店(呈贡仕林...</h3>
              <div class="business-rating">
                <span class="score">4.7分</span>
                <span class="sales">月售200+</span>
                <span class="time">26分钟</span>
                <span class="distance">3.4km</span>
              </div>
              <div class="delivery-line">
                <span>起送¥20</span>
                <span class="delivery">满39配送¥1</span>
                <span class="origin-price">¥5</span>
                <span class="delivery-tag">蜂鸟准时达</span>
              </div>
              <div class="promotion-box">
                <div class="promotion-tag">
                  <i class="fire-icon">🔥</i>
                  <span>近期21人好评</span>
                </div>
                <div class="promotion-tag">
                  <span>近7日260人访问</span>
                </div>
              </div>
              <div class="activity-box">
                <div class="activity-tag">配送费满39减4</div>
                <div class="activity-tag">品类25减4</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 引入底部导航 -->
    <Footer />
  </div>
</template>

<style scoped>
.wrapper {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 14vw;
  width: 100%;
  overflow-x: hidden;
}

.header {
  background: #0097ff;
  padding: 10px 15px;
  height: 40px;
}

.content-wrapper {
  background: #fff;
  border-radius: 20px 20px 0 0;
  margin-top: -10px;
  padding: 15px 0 14vw 0;
  width: 100%;
}

.location-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
}

.elm-logo {
  width: 25px;
  height: 25px;
}

.location {
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.search-container {
  margin: 0 12px 15px;
  padding: 0;
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 25px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-input input {
  border: none;
  outline: none;
  margin-left: 8px;
  width: 100%;
  font-size: 14px;
  color: #333;
}

.search-input input::placeholder {
  color: #999;
}

.search-btn {
  background: #0097ff;
  color: #fff;
  font-size: 14px;
  padding: 6px 15px;
  border: none;
  border-radius: 25px;
}

.search-input .fa-search {
  color: #999;
}

.recommend-title {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
  padding: 12px 0;
  gap: 15px;
}

.recommend-title::before,
.recommend-title::after {
  content: '';
  width: 50px;
  height: 1px;
  background: #eee;
}

.business-list {
  padding: 0;
  margin: 0 -12px;
}

.business-item {
  background: #fff;
  border-radius: 8px;
  margin: 0 12px 10px;
  padding: 15px;
  position: relative;
  display: flex;
}

.business-tag {
  position: absolute;
  left: 15px;
  top: 15px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 12px;
}

.business-img {
  width: 65px;
  height: 65px;
  margin-right: 10px;
  border-radius: 4px;
  overflow: hidden;
}

.business-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-info {
  flex: 1;
}

.business-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.business-rating {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.score, .sales, .time, .distance {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
}

.score {
  color: #ff6b01;
}

.delivery-line {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.delivery {
  margin: 0 5px;
}

.origin-price {
  color: #999;
  text-decoration: line-through;
  margin-left: 4px;
}

.promotion-box {
  margin-bottom: 5px;
}

.promotion-tag {
  display: inline-flex;
  align-items: center;
  background: #fff5e6;
  color: #ff6b01;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.activity-box {
  display: flex;
  flex-wrap: wrap;
}

.activity-tag {
  display: inline-flex;
  align-items: center;
  background: #fffbf1;
  border: 1px solid #ffe4b7;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  color: #666;
  margin-right: 8px;
}

.activity-tag.red {
  color: #ff4e00;
  background: #fff3f0;
  border: 1px solid #ffd4cc;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  display: flex;
  border-top: 1px solid #eee;
}

.footer-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 12px;
  cursor: pointer;
}

.footer-item.active {
  color: #0097ff;
}

.footer-item i {
  font-size: 20px;
  margin-bottom: 3px;
}

.footer-item:active {
  opacity: 0.8;
}

/* 新增分类模块样式 */
.category-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;
}

.category-item {
  text-align: center;
  cursor: pointer;
}

.category-item img {
  width: 50px;
  height: 50px;
}

.category-item span {
  display: block;
  font-size: 12px;
  color: #333;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  margin: 15px 0;
}

.banner-left,
.banner-center,
.banner-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.banner-left img,
.banner-right img {
  width: 25px;
  height: 25px;
}

.banner-center img {
  width: 50px;
  height: 50px;
}

.banner-text {
  flex: 1;
}

.banner-text h3 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.banner-tag {
  font-size: 12px;
  color: #999;
}

.category-section {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
}

.category-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.new-user {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
}

.new-user-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.new-user-title img {
  width: 20px;
  height: 20px;
}

.new-user-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.new-user-text {
  flex: 1;
}

.new-user-text p {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.new-user-coupons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coupon {
  background: #fff5e6;
  border-radius: 3px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.amount {
  font-size: 14px;
  font-weight: bold;
  color: #ff6b01;
}

.desc {
  font-size: 12px;
  color: #666;
}

.type {
  font-size: 12px;
  color: #999;
}

.order-btn {
  background: #0097ff;
  color: #fff;
  font-size: 14px;
  padding: 6px 15px;
  border: none;
  border-radius: 25px;
}

.banner-top {
  margin-bottom: 15px;
}

.banner-bottom {
  margin-top: 15px;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-wrapper {
  padding: 15px 12px;
  width: 100%;
  box-sizing: border-box;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
}

.nav-item {
  flex: 1;
  min-width: 0;
}

.nav-content {
  background: #fff;
  border-radius: 25px;
  padding: 0 12px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.nav-item:first-child {
  margin-left: 0;
}

.nav-item:last-child {
  margin-right: 0;
}

.nav-item:first-child .nav-content .nav-text {
  font-weight: 500;
  font-size: 14px;
}

.nav-item:nth-child(2) .nav-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.nav-item:nth-child(2) .nav-icon {
  width: 14px;
  height: 14px;
  margin: 0;
}

.nav-item:nth-child(2) .nav-text {
  line-height: 36px;
}

.nav-item:last-child {
  flex: 0 0 36px;
  margin-left: auto;
}

.nav-item:last-child .nav-content {
  width: 36px;
  min-width: 36px;
  padding: 0;
  justify-content: center;
}

.nav-item:last-child .fa-bars {
  font-size: 18px;
  color: #666;
}

.nav-text {
  font-size: 13px;
  color: #333;
  line-height: 36px;
  white-space: nowrap;
}

/* 添加灰色背景区域样式 */
.grey-background {
  background-color: #f5f5f5;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
</style>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentInstance } from 'vue'
import Footer from './Footer.vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()
const router = useRouter()
const businessList = ref([])

onMounted(() => {
  const token = sessionStorage.getItem('token')
  if (!token) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  // 获取商家分类列表
  request({
    url: '/BusinessController/listBusinessByOrderTypeId',
    method: 'get',
    params: {
      orderTypeId: 1  // 假设1是默认分类
    }
  }).then(response => {
    if (Array.isArray(response.data)) {
      // 处理商家列表数据
      businessList.value = response.data.map(business => ({
        ...business,
        rating: business.rating || 4.5,
        monthSales: business.monthSales || '1000+',
        deliveryTime: business.deliveryTime || '30分钟',
        distance: business.distance || '1.5km'
      }))
    }
  }).catch(error => {
    console.error(error)
    if (error.response?.status === 403) {
      ElMessage.error('登录已过期，请重新登录')
      sessionStorage.removeItem('token')
      proxy.$removeSessionStorage('user')
      router.push('/login')
    } else {
      ElMessage.error('获取商家列表失败')
    }
  })
})

const toBusinessList = (orderTypeId) => {
  if (!sessionStorage.getItem('token')) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  
  router.push({
    path: '/businessList',
    query: { orderTypeId }
  })
}
</script>